<!-- 导出表格成Excel表格内含图片 -->
<template>
  <Count />
  <LoveTalk />
  <div class="table">
    <div style="margin: 20px 0">
      <Button type="primary" @click="getData" style="margin-right: 10px"
        >获取数据</Button
      >
      <Button type="primary" @click="handleExport" style="margin-right: 10px"
        >导出表格</Button
      >
      <Button
        type="primary"
        @click="handleXLSXExport"
        style="margin-right: 10px"
        >XLSX导出表格</Button
      >
      <Button type="primary" @click="getActionsData" style="margin-right: 10px"
        >获取actions数据</Button
      >
    </div>
    <Table
      ref="table"
      :columns="columns"
      :data-source="data"
      bordered
      :loading="loading"
      :locale="emptyText"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'avatar1'">
          <img :src="text" style="width: 200px" />
        </template>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Button, Table } from "ant-design-vue";
// @ts-ignore
import table2excel from "js-table2excel";
import { getDataList } from "@/api/table";
import Count from "@/components/Count.vue";
import LoveTalk from "@/components/LoveTalk.vue";
import { useTableStore } from "@/store/table";
import * as XLSX from "xlsx";

const tableStore = useTableStore();
const columns: any = [
  {
    title: "名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "年龄",
    dataIndex: "age",
    align: "center",
  },
  {
    title: "照片",
    dataIndex: "avatar1",
    align: "center",
  },
  {
    title: "爱好",
    dataIndex: "hobby",
    align: "center",
  },
];

const data = ref([]);
const emptyText = {
  emptyText: "暂无数据",
};
function handleExport() {
  const column = [
    {
      title: "名称",
      key: "name",
      type: "text",
    },
    {
      title: "年龄",
      key: "age",
      type: "text",
    },
    {
      title: "照片",
      key: "avatar1",
      type: "image",
      width: 150,
    },
    {
      title: "爱好",
      key: "hobby",
      type: "text",
      width: 150,
    },
  ];
  table2excel(column, data.value, `导出表格`);
}
const table = ref();
// xlsx导出
function handleXLSXExport() {
  // 方法一
  // 获取表格元素
  // const tableEl = table.value.$el.querySelector('table');
  // 将表格元素转换为工作表
  // const ws = XLSX.utils.table_to_sheet(tableEl);
  
  // 方法二
  const headerMap: any = {
    name: "名称",
    age: "年龄",
    avatar1: "照片",
    hobby: "爱好",
  };
  // 转换数据，将字段名替换为中文表头
  const exportData = data.value.map((item) => {
    const newItem: any = {};
    Object.keys(headerMap).forEach((key) => {
      newItem[headerMap[key]] = item[key];
    });
    return newItem;
  });
  const ws = XLSX.utils.json_to_sheet(exportData);

  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "table.xlsx");
}
const loading = ref(false);
function getData() {
  loading.value = true;
  getDataList()
    .then((res: any) => {
      data.value = res.data;
      console.log("data", data.value);
    })
    .finally(() => {
      loading.value = false;
    });
}
async function getActionsData() {
  loading.value = true;
  try {
    await tableStore.getData();
    data.value = tableStore.tableData;
  } catch (error) {
    console.log(error);
  }
  loading.value = false;
}
</script>

<style lang="less" scoped>
.table {
  margin: 0 auto;
}
</style>
